<template>
  <div>
    <div ref="myChart" :style="{width: '100%', height: '800px',margin:'0px auto'}"></div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      categories: new Array(4).fill().map((v, i) => {
        return { name: '类目' + i }
      }),
    }
  },
  created() {
    this.$nextTick(() => {
      this.drawLine()
    })
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        // 图的标题
        title: {
          text: 'ECharts 关系图'
        },
        grid: {
          left: '20%',
          right: '0',
          bottom: '10%',
          // containLabel: true
        },
        // 提示框的配置
        // tooltip: {
        //   formatter: function (x) {
        //     return x.data.des;
        //   }
        // },
        // 工具箱
        toolbox: {
          // 显示工具箱
          show: true,
          feature: {
            mark: {
              show: true
            },
            // 还原
            restore: {
              show: true
            },
            // 保存为图片
            saveAsImage: {
              show: true
            }
          }
        },
        legend: [{
          // selectedMode: 'single',
          data: this.categories.map(function (a) {
            return a.name;
          })
        }],
        series: [{
          type: 'graph', // 类型:关系图
          layout: 'force', //图的布局，类型为力导图
          symbolSize: 40, // 调整节点的大小
          roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [2, 10],
          edgeLabel: {
            normal: {
              textStyle: {
                fontSize: 16
              }
            }
          },
          force: {
            repulsion: 5200,
            edgeLength: [10, 50]
          },
          draggable: true,
          lineStyle: {
            normal: {
              width: 1,
              color: 'green',
            }
          },
          edgeLabel: {
            normal: {
              show: false,
              formatter: function (x) {
                return x.data.name;
              }
            }
          },
          label: {
            normal: {
              show: true,
              textStyle: {}
            }
          },

          // 数据
          data: [{
            name: 'wfL',
            des: 'nodedes01',
            draggable: true,
            symbol: 'image://' + 'https://img2.baidu.com/it/u=1544566210,3232733651&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=68a72a4e250f367629f8bf0461193f1a',
            symbolSize: 130,
            category: 0,
          }, {
            name: 'node02',
            draggable: false,
            des: 'nodedes02',
            symbol: 'image://' + 'https://img2.baidu.com/it/u=1881863966,2954271514&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=b882655c4096b95126d9b9000de94e2a',
            symbolSize: 120,
            category: 1,
          }, {
            name: 'node03',
            draggable: false,
            des: 'nodedes3',
            symbol: 'image://' + 'https://img0.baidu.com/it/u=4168817169,4139336866&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=fdef312c6b407955707cc93a096eeb6b',
            symbolSize: 120,
            category: 1,
          }, {
            name: 'node04',
            draggable: false,
            des: 'nodedes04',
            symbol: 'image://' + 'https://img0.baidu.com/it/u=3281631535,2487160313&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=7f7c4b8829e81c5fe69b3167bfa3b28c',
            symbolSize: 120,
            category: 1,
          }, {
            name: 'node05',
            draggable: false,
            symbol: 'image://' + 'https://img1.baidu.com/it/u=2281015990,3012934679&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=eb04aec5dfdb2986f05fa81bdb23980d',
            des: 'nodedes05',
            symbolSize: 120,
            category: 1,
          }, {
            name: 'node06',
            draggable: false,
            symbol: 'image://' + 'https://img0.baidu.com/it/u=2681524077,2106220721&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658336400&t=c1370a80d6b9eef6c71f1452a64d6a1f',
            des: 'nodedes06',
            symbolSize: 120,
            category: 1,
          }
          ],
          links: [{
            source: '王烽柳',
            target: 'node02',
            name: 'link01',
            des: 'link01des'
          }, {
            source: '王烽柳',
            target: 'node03',
            name: 'link02',
            des: 'link02des'
          }, {
            source: '王烽柳',
            target: 'node04',
            name: 'link03',
            des: 'link03des'
          }, {
            source: '王烽柳',
            target: 'node05',
            name: 'link04',
            des: 'link05des'
          }, {
            source: '王烽柳',
            target: 'node06',
            name: 'link05',
            des: 'link06des'
          }
          ],
          categories: this.categories,
        }]

      })
      // myChart.on('click', (params) => {
      //   this.$msg_s(params.name + ':' + params.seriesName + ':' + params.value)
      // })
      //  document.getElementById('myChart').setAttribute('_echarts_instance_', '');
    },
  }
}
</script>
<style scoped lang='scss'>
</style>